<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--react核⼼包-->
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <!--react dom相关的包-->
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <!-- 提供es6和jsx的⽀持-->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <style>
        .box{
            width: 200px;
            height: 800px;
            background-color: blanchedalmond;
        }
        .sbox{
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            margin-left: 500px;
        }
    </style>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        const container = document.getElementById("app")
        const root = ReactDOM.createRoot(container)

        class QQ extends React.Component{
            state = {
                nickName: "张三",
                show:"none"
            }

            modelDisplay = () => {
                this.setState({
                    show: "block"
                })
            }

            closeModel = () => {
                this.setState({
                    show: "none"
                })
            }


            render(){
                let {nickName, show} = this.state
                return (
                    <div className="box">
                        <button id="btn" onClick={this.modelDisplay}>编辑</button>
                        <h1>{nickName}</h1>
                        <Model nickName={nickName} show={show} closeModel={this.closeModel}></Model>
                    </div>
                )
            }
        }


        class Model extends React.Component{
            // state = {
            //     show: this.props.show,
            //     // show: "block"
            // }



            render(){
                let {nickName, show, closeModel} = this.props
                // let {show} = this.state
                // console.log("show_state:", show)
                return (
                    <div className="sbox" style={{display: show}}>
                        <h1 onClick={this.display}>{nickName}</h1>
                        <button onClick={closeModel}>关闭弹窗</button>
                    </div>
                )
            }
        }
        root.render(
            <QQ></QQ>
        )
    </script>
</body>
</html>